<script setup lang="ts">
import { ref } from "vue";
import {
  useMessage,
  NButton,
  NSlider,
  NInput,
  NImage,
  NSelect,
  NSwitch,
  NRadioGroup,
  NRadio,
  NUpload,
} from "naive-ui";
import axios from "@/utils/request/axios";

import { SvgIcon } from "@/components/common";
import { homeStore, useAppStore } from "@/store";
const appStore = useAppStore();

const ms = useMessage();
const fsRef = ref();
const st = ref({ status: "", isGo: false });
const base64Array = ref<string[]>([]);
var isDisabled = ref(true);
const $emit = defineEmits(["yuyinmergevideoSent", "finalvideoSent"]);
const options = [
  {
    label: "广场",
    value: "SQUARE",
  },
  {
    label: "广",
    value: "SQUARE1",
  },
];
const songs = [
  {
    value: "256",
    label: "256",
  },
  {
    value: "512",
    label: "512",
  },
];

const facemodels = [
  {
    value: "crop",
    label: "crop",
  },
  {
    value: "resize",
    label: "resize",
  },
  {
    value: "full",
    label: "full",
  },
  {
    value: "extcrop",
    label: "extcrop",
  },
  {
    value: "extfull",
    label: "extfull",
  },
];
var manvideoInfo = ref("开始生成");
var params = ref({
  FacePictureId: ref(""),
  PPTFileId: ref(""),
  Preprocess: ref("crop"),
  StillMode: ref(false),
  UseEnhancer: ref(false),
  BatchSize: ref(2),
  SizeOfImage: ref("256"),
  PoseStyle: ref(0),
  ExpScale: ref(1),
  UseRefVideo: ref(false),
  RefVideo: ref(""),
  RefInfo: ref(""),
  Speed: ref(window.speed || 1),
});
var stepvalue = ref(2);
var loading = ref(false);
const f = ref({ sourceBase64: "", targetBase64: "" });
let timer;
function pollTrainInfo(facevideoid) {
  console.log(facevideoid);

  axios
    .get(`/api/sadtalker/check?facevideoid=${facevideoid}`, {})
    .then((response) => {
      manvideoInfo.value = response.data.data.Info;
      //  appStore.setFaceVideoUrl('/src/views/chat/video/tts_video/video_20240227024436.mp4')

      // window.manvideoInfourl = response.data.data.FilePath;
      if (response.data.data.Info == "done") {
        window.FaceVideoId = response.data.data.FileId;
        appStore.setFaceVideoUrl(
          "/src/views/chat" + response.data.data.FilePath
        );

        loading.value = false;

        clearInterval(timer);
      }
    })
    .catch((error) => {
      console.error("上传失败", error);
    });
}
function customRequest({ file, onSuccess, onError, onProgress }) {
  const uploadUrl = "/api/upload/file";

  const formData = new FormData();
  formData.append("file", file.file);

  axios
    .post(uploadUrl, formData, {})
    .then((response) => {
      console.log(response.data.data);
      if (response.data.status == "success") {
        params.value.FacePictureId = response.data.data.FileId;

        ms.success("上传成功！");
      }
      // 处理上传成功逻辑
    })
    .catch((error) => {
      console.log(error);

      // 处理上传失败逻辑
      onError(error);
    });
}

const create = () => {
  loading.value = true;
  params.value.PPTFileId = window.pptFileId;
  if (params.value.Speed) {
    let url = "/api/sadtalker/gen";
    axios
      .post(url, params.value, {})
      .then((response) => {
        timer = window.setInterval(
          () => pollTrainInfo(response.data.data.FileId),
          10000
        );
        //  appStore.setFaceVideoUrl('/src/views/chat/video/tts_video/video_20240227024436.mp4')
      })
      .catch((error) => {
        console.error("上传失败", error);
      });
  }
};
</script>
<template>
  <div class="flex justify-around items-center">
    <div>
      <div class="mb-1 flex items-center" style="margin-top: 20px">
        <span style="width: 120px"> 上传图片： </span>
        <div class="w-[190px]">
          <n-upload
            accept="image/png, image/jpeg"
            action=" https://8ff6-2001-250-3c0f-1008-00-811e.ngrok-free.app/api/upload/file"
            :default-file-list="previewFileList"
            :max="1"
            :custom-request="customRequest"
            list-type="image-card"
            @preview="handlePreview"
          />
        </div>
      </div>
      <!-- <div class="mb-1 flex items-center" style="margin-top: 20px">
        <span style="width: 120px"> 语音模型： </span>
        <div class="w-[190px]"> -->
      <!-- <n-select
            v-model:value="st.dimensions"
            :options="dimensionsList"
            size="small"
            :render-label="renderLabel"
            :clearable="true"
          /> -->
      <!-- <n-select
            v-model:value="selectedOption"
            :options="options"
            size="small"
          >
            <template #item="{ option, index, selected, hover }">
              <div
                class="custom-option"
                :class="{ selected: selected, hover: hover }"
              >
                cewv
              </div>
            </template>
          </n-select>
        </div>
      </div> -->
      <div class="mb-1 flex items-center">
        <span style="width: 120px; margin-bottom: 10px"> 训练生成步长： </span>
        <div class="w-[190px]">
          <n-slider v-model:value="stepvalue" max="10" :step="1" />
        </div>
      </div>

      <div class="mb-1 flex">
        <span style="width: 120px; margin-bottom: 10px"> 稳定模式 </span>
        <div class="w-[190px]">
          <n-switch v-model:value="params.StillMode" />
        </div>
      </div>
      <div class="mb-1 flex">
        <span style="width: 120px; margin-bottom: 10px"> 分辨率 </span>
        <div class="w-[190px]">
          <n-radio-group v-model:value="params.SizeOfImage" name="radiogroup">
            <n-radio
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
            >
              {{ song.label }}
            </n-radio>
          </n-radio-group>
        </div>
      </div>
      <div class="mb-1 flex">
        <span style="width: 120px; margin-bottom: 10px"> 人脸模型 </span>
        <div class="w-[190px]">
          <n-radio-group v-model:value="params.Preprocess" name="radiogroup">
            <n-radio
              v-for="song in facemodels"
              :key="song.value"
              :value="song.value"
            >
              {{ song.label }}
            </n-radio>
          </n-radio-group>
        </div>
      </div>
      <div class="mb-1 flex">
        <span style="width: 120px; margin-bottom: 10px"> 姿态风格 </span>
        <div class="w-[190px]">
          <div class="w-[190px]">
            <n-slider v-model:value="params.PoseStyle" max="46" :step="1" />
          </div>
        </div>
      </div>

      <div class="mb-1 flex">
        <span style="width: 120px; margin-bottom: 10px"> 表情幅度 </span>
        <div class="w-[190px]">
          <div class="w-[190px]">
            <n-slider v-model:value="params.ExpScale" max="5" :step="1" />
          </div>
        </div>
      </div>
      <div class="mb-1 flex">
        <span style="width: 120px; margin-bottom: 10px">
          是否使用面部增强
        </span>
        <div class="w-[190px]">
          <n-switch v-model:value="params.UseEnhancer" />
        </div>
      </div>
      <div class="mb-1 flex">
        <span style="width: 120px; margin-bottom: 10px">
          是否使用参考视频
        </span>
        <div class="w-[190px]">
          <n-switch v-model:value="params.UseRefVideo" />
        </div>
      </div>
      <div class="mb-1 flex" v-if="params.UseRefVideo">
        <span style="width: 120px; margin-bottom: 10px"> 参考视频路径 </span>
        <div class="w-[190px]">
          <n-input
            type="text"
            v-model:value="f.prompt"
            placeholder=""
            disabled
            clearable
          />
        </div>
      </div>
      <div class="mb-1 flex" v-if="params.UseRefVideo">
        <span style="width: 120px"> 参考部分 </span>
        <div class="w-[190px]">
          <n-input
            type="text"
            v-model:value="f.prompt"
            placeholder=""
            disabled
            clearable
          />
        </div>
      </div>

      <div class="mb-4" style="margin-top: 20px">
        <div class="flex">
          <n-button
            type="primary"
            :block="true"
            :loading="loading"
            @click="create()"
            :disabled="!params.FacePictureId || loading"
          >
            <SvgIcon icon="mingcute:send-plane-fill" />

            {{ manvideoInfo }}
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>